<template>
    <el-dialog :title="dialogText" :visible="true" width="600px" center :lock-scroll="true" @close="cancel"
        :close-on-press-escape="false" :close-on-click-modal="false" top="40px">
        <el-form ref="form" label-width="140px" @close="cancel">
            <el-form-item label="课程名称" required>
                <el-input v-model="formData.title" placeholder="请输入课程名称" />
            </el-form-item>
            <el-form-item label="课程封面" required>
                <upload-picture :url.sync="formData.coverImage" prefix="topic/lesson"></upload-picture>
            </el-form-item>

            <el-form-item label="考试题目总数" required>
                <el-input-number v-model="formData.questionCount" :min="10" :max="100"></el-input-number>
            </el-form-item>
            <el-form-item label="考试通过正确率" required>
                <el-input-number v-model="formData.passRate" controls-position="right" :min="10" :step="5"
                    :max="100"></el-input-number> &nbsp; %
            </el-form-item>



            <el-form-item label="课程简介">
                <el-input type="textarea" v-model="formData.desc" placeholder="请输入课程简介" />
            </el-form-item>
        </el-form>
        <span slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm">保存</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { getCertificateList }  from '../../utils/certificate'
export default {

    data() {
        return {
            dialogText: "添加课程",
            formData: {
                title: "",
                coverImage: "",
                questionCount: 20,
                passRate: 60,
                desc: "",
            },
            type: "add",
            datas: []
        }
    },
    methods: {

        

        async init(type, row) {
            await this.getDatas();
            this.type = type;
            if (type === 'edit') {
                this.dialogText = "编辑课程";
                this.formData = {
                    ...this.formData,
                    ...row
                }
            }
            console.log(this.formData, "this.formData");
        },

        async getDatas() {
            this.datas = await getCertificateList();

        },
        cancel() {
            this.$emit("update:visible", false);
            this.$emit("refresh")
        },


        async submitForm() {


            const { title, coverImage } = this.formData;
            const rules = [
                {
                    case: !title,
                    message: "请输入课程名称",
                },
                {
                    case: !coverImage,
                    message: "课程封面",
                },

         
            ]

            const valid = this.$validForm(rules)

            if (!valid) {
                return
            }

            const loading = this.$loading();
            const url = this.type === "add" ? "/api/topic-lesson/create" : "/api/topic-lesson/update";
            const { topicId } = this.$route.query;
            const params = {
                ...this.formData,
                topicId: Number(topicId)
            }
            Object.keys(params).forEach(key => {
                if (params[key] === undefined) {
                    delete params[key]
                }
            })
            const { code } = await this.$fetch.post(url, params);
            if (code === 0) {
                this.$message.success(this.type === "add" ? "添加课程成功" : "修改课程成功");
                this.$nextTick(() => {
                    this.cancel();
                });
            }
            loading.close();
        },
    }
}

</script>

<style scoped lang="less">
::v-deep .preview-image {
    width: 320px;
}
</style>







